<template>
  <div class="views" id="views">
    <div id="container" class="container"></div>
  </div>
</template>

<script>
import { App } from '@/assets/App/App'
import * as THREE from 'three'

const app = new App()
export default {
  data () {
    return {
      params: {
        methods: {
          animation: true, // 循环调用渲染
          renderer: true, // 应用渲染器
          light: true, // 在场景中加入全景光
          controls: true, // 使用轨道控制器，鼠标滚轮控制放大缩小，左键拖动绕中心点旋转，右键拖动中心点。
          statement: true // 在控制台打印声明，与本案例无关，可忽略。
        },
        events: {
          windowResize: true // 监听窗口尺寸变化，并改变渲染页面尺寸
        },
        params: {
          container: null, // 渲染结果输出dom页面
          renderer: [
            'WebGLRenderer',
            'CSS3DRenderer'
          ],
          controls: [
            'OrbitControls'
          ],
          rendererParams: {
            antialias: true // 抗锯齿，可忽略。
          }
        }
      }
    }
  },
  mounted () {
    this.params.params.container = document.getElementById('container') // 获取渲染结果输出dom页面
    /**
     * 初始化场景
     */
    app.init(this.params, (scene, camera, renderer) => {
      camera.position.set(250, 50, 250) // 修改相机位置
    })
    /**
     * 添加网格辅助线
     */
    const gridHelper = new THREE.GridHelper(1000, 100) // size边长，divisions密集程度
    app.scene.add(gridHelper)
    /**
     * 添加坐标轴辅助线
     */
    const axesHelper = new THREE.AxesHelper(100) // 红x 绿y 蓝z
    app.scene.add(axesHelper)
    /**
     * 添加Show3DLabel
     */
    const label = app.createShow3DLabel('| 标题', '这是一个标签，是一个用精灵展示的div标签')
    const label2 = app.createShow3DLabel('| 标题', '这是一个标签，是一个用精灵展示的div标签')
    const label3 = app.createShow3DLabel('| 标题', '这是一个标签，是一个用精灵展示的div标签')
    // 修改标签大小和位置
    label.position.set(0, 50, 0)
    label.scale.set(0.5, 0.5, 0.5)
    label2.position.set(50, 0, 0)
    label2.scale.set(0.5, 0.5, 0.5)
    label3.position.set(-50, 0, 0)
    label3.scale.set(0.5, 0.5, 0.5)
  }
}
</script>

<style scoped>
.views {
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
}
</style>
